<template>
  <div class="box">
    <header>
      <span class='iconfont ico' @click="() => { this.$router.go(-1) }">&#xe65a;</span>
      <h4>历史信息</h4>
    </header>
    <div class="conent">
      <!-- <div class="conent_box">
        <p class="red_box"></p>
        <div>
          <div class="day">
            <p>一号温棚</p>
            <p>2020/4/20</p>
          </div>
          <div class="text">
            <h2>温度过高</h2>
            <p>温度过高会导致农产品坏死</p>
          </div>
          <span @click="() => { this.$router.push('/setup') }">去设置</span>
        </div>
      </div> -->
       <ve-line :data="data" :settings="chartSettings"></ve-line>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    this.chartSettings = {
      metrics: ['温度', '湿度', '光照'],
      dimension: ['日期'],
    }
    return {
      data: {},
      chartData: {
          columns: ['data', 'tem', 'hum', 'light'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        }
    }
  },
  mounted () {
    axios({
      url: '/api/IntelligentAgriculture/receiveDataController/sendData',
      method: 'get',
      headers: {'token': localStorage.getItem('token')}
    }).then(res => {
      let str = res.data.data

      let arr = str.map(item => { 
        return { '日期': item.insertTime, '温度': item.tem, '湿度': item.hum, '光照': item.light }
      })

      let obj = {
        columns: ['日期', '温度', '湿度', '光照'],
        rows: arr
      }
      this.data = obj
    })
    setInterval(() => {
      axios({
        url: 'http://r6wnt5.natappfree.cc/IntelligentAgriculture/receiveDataController/sendData',
        method: 'get',
        headers: {'token': localStorage.getItem('token')}
      }).then(res => {
        let str = res.data.data

        let arr = str.map(item => { 
          return { '日期': item.insertTime, '温度': item.tem, '湿度': item.hum, '光照': item.light }
        })

        let obj = {
          columns: ['日期', '温度', '湿度', '光照'],
          rows: arr
        }
        this.data = obj
      })
    }, 3000)
  }
}
</script>

<style lang="scss" scoped>
  .box {
    height: 100%;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    header {
      position: relative;
      padding: 30px 0;
      span {
      position: absolute;
      }
      h4 {
        text-align: center;
        font-size: 34px;
      }
    }
    .conent {
      .conent_box {
        border-radius: 20px;
        padding: 0 20px 30px 50px;
        background: #ffffff;
        position: relative;
        margin-bottom: 40px;
        .day {
          font-size: 24px;
          display: flex;
          justify-content: space-between;
          padding: 40px 0 30px 0;
          p {
            &:nth-of-type(2) {
              color: #b4b4b4;
            }
          }
        }
        .text {
          font-size: 24px;
          h2 {
            font-size: 40px;
            padding-bottom: 15px;
          }
          p {
            color: #b4b4b4;
          }
        }
        span {
          position: absolute;
          display: block;
          padding: 20px 35px;
          background: #666;
          font-size: 24px;
          border-radius: 15px;
          color: #fff;
          bottom: 25px;
          right: 40px;
        }
        .red_box {
          width: 80px;
          background: rgb(62, 238, 71);
          height: 10px;
          border-radius: 5px;
        }
      }
    }
  }
</style>
